<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSMCRUD</title>
</head>
<script type="text/javascript" src="./static/js/vue.js"></script>
<link rel="stylesheet" href="./static/css/element.css"/>
<script type="text/javascript" src="./static/js/element.js"></script>
<link rel="stylesheet" href="./static/css/style.css"/>
<script type="text/javascript" src="./static/js/axios.js"></script>

<body>
<div id="app">
    <div class="common-layout">
        <el-container>
            <el-header>员工信息SSM-CRUD</el-header>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="6" :push="18">
                        <el-button type="warning" @click="handleAdd">添加</el-button>
                        <el-button type="danger" @click="handleBatchDelete">删除</el-button>
                    </el-col>
                </el-row>
                <el-table stripe :data="tableData" style="width: 100%" @selection-change="selection">
                    <el-table-column type="selection" width="30"></el-table-column>
                    <el-table-column prop="empId" label="编号" width="70"></el-table-column>
                    <el-table-column prop="empName" label="姓名"></el-table-column>
                    <el-table-column prop="gender" label="性别"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column prop="deptName.deptName" label="部门"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="demo-pagination-block">
                    <div class="page-style">
                        <el-pagination :currentPage="page.pageNum"
                                       :page-size="pageSize"
                                       :page-sizes="[5, 10,20, 30, 50]"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="page.total"
                                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>

    <!-- 编辑dialog添加框 -->
    <el-dialog v-model="editDialogFormVisible" :title="editNameDisabled?'编辑员工':'添加员工'" @close="dialogClose">
        <el-form :model="editEmpForm" :rules="editEmpFormRules" ref="formRef">
            <el-form-item label="姓名" prop="empName">
                <el-input v-model="editEmpForm.empName" :disabled="editNameDisabled"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="editEmpForm.email"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <div>
                    <el-radio v-model="editEmpForm.gender" label="男" size="large">男</el-radio>
                    <el-radio v-model="editEmpForm.gender" label="女" size="large">女</el-radio>
                </div>
            </el-form-item>
            <el-form-item label="部门">
                <el-select v-model="editEmpForm.did" placeholder="选择部门">
                    <el-option v-for="(item,index) in dept" key="index" :label="item.deptName"
                               :value="item.deptId"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm">取消</el-button>
                    <el-button type="primary" @click="addSubmit">确定</el-button>
                </span>
        </template>
    </el-dialog>
    <!-- ================================== -->
</div>

</body>

<script type="text/javascript">

    window.onload = function () {
        const VueApp = {
            data() {
                return {
                    editEmpForm: {},
                    //表单验证
                    editEmpFormRules: {
                        empName: [
                            {
                                required: true,
                                message: 'Please input Activity name',
                                trigger: 'blur',
                            },
                            {
                                min: 1,
                                max: 15,
                                message: 'Length should be 1 to 15',
                                trigger: 'blur',
                            },
                        ],
                        email: [
                            {
                                required: true,
                                message: '请输入正确邮箱',
                                trigger: 'blur',
                                pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                            },
                        ],
                        gender: [
                            {
                                required: true,
                                message: '请选择性别',
                                trigger: 'blur',
                            },
                        ],
                        deptName: [
                            {
                                required: true,
                                message: '请选择部门',
                                trigger: 'blur',
                            },
                        ],
                    },
                    editDialogFormVisible: false,
                    //可编辑
                    editNameDisabled: false,
                    //表格数据
                    tableData: [],
                    page: {},
                    pageSize: 5,
                    currentPage: 1,
                    //部门
                    dept: [],
                    //最大页数
                    maxPage: 1,
                    deleteEmpsId: []
                }
            },
            methods: {
                //获取所有员工信息
                getEmpApi(page, pageSize) {
                    axios.get('http://localhost:8080/SSM/emps', {
                        params: {
                            page: page,
                            pageSize: pageSize
                        }
                    }).then(data => {
                        this.tableData = data.data.data.pageInfo.list
                        this.page = data.data.data.pageInfo
                        this.maxPage = this.page.pages
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                getSingEmpApi(empId) {
                    axios.get('http://localhost:8080/SSM/emp', {
                        params: {
                            empId,
                        }
                    }).then(data => {
                        this.editEmpForm = data.data.data.emp
                        console.log(this.editEmpForm)
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                //更新员工信息
                updateEmpApi(params) {
                    axios.put('http://localhost:8080/SSM/emps', {...params}).then(data => {
                        if (data.data.status == 200) {
                            this.$message.success("更新成功")
                            this.getEmpApi(this.currentPage, this.pageSize)
                            return
                        }
                        this.$message.error("更新失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },
                //添加员工信息
                addEmpApi(params) {
                    axios.post('http://localhost:8080/SSM/emps', {...params}).then(data => {
                        if (data.data.status == 200) {
                            this.$message.success("添加成功")
                            this.getEmpApi(this.maxPage, this.pageSize)
                            return
                        }
                        this.$message.error("添加失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                deleteEmpApi(empId) {
                    axios.delete(`http://localhost:8080/SSM/emps/${empId}`).then(data => {
                        if (data.data.status == 200) {
                            this.getEmpApi(this.currentPage, this.pageSize)
                            this.$message.success("删除成功")
                            return
                        }
                        this.$message.error("删除失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                deleteBatchEmpApi(Ids) {
                    //判断是否为空
                    if (Object.keys(Ids).length === 0) {
                        return this.$message.error("请选择删除员工")
                    }
                    let arrayId = []
                    Ids.forEach(id => {
                        arrayId.push(id)
                    })
                    // arrayId.shift();
                    console.log(arrayId)
                    axios.delete('http://localhost:8080/SSM/emps', {
                        data: {
                            empIds: arrayId,
                        }
                    }).then(data => {
                        if (data.data.status == 200) {
                            this.getEmpApi(this.currentPage, this.pageSize)
                            this.deleteEmpsId = []
                            return this.$message.success("批量删除成功")
                        }
                        this.$message.error("批量删除失败")
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                //获取部门信息
                getDeptApi() {
                    axios.get('http://localhost:8080/SSM/dept').then(data => {
                        this.dept = data.data.data.dept
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                },

                //编辑按钮
                handleEdit(row) {
                    this.getSingEmpApi(row.empId)
                    this.getDeptApi()
                    this.editNameDisabled = true
                    this.editDialogFormVisible = true;
                },
                // 删除按钮
                handleDelete(row) {
                    this.deleteEmpApi(row.empId)
                },
                // 添加按钮
                handleAdd() {
                    this.getDeptApi()
                    this.editNameDisabled = false
                    this.editDialogFormVisible = true;
                },
                // 批量删除按钮
                handleBatchDelete() {
                    this.deleteBatchEmpApi(this.deleteEmpsId)
                },
                //提交
                addSubmit() {
                    const valid = this.submitForm()
                    if (valid) {
                        if (this.editNameDisabled) {
                            this.updateEmpApi(this.editEmpForm)
                        } else {
                            this.addEmpApi(this.editEmpForm)
                        }
                        this.editDialogFormVisible = false
                    }

                },

                selection(emps) {
                    this.deleteEmpsId = []
                    emps.forEach(emp => {
                        this.deleteEmpsId.push(emp.empId)
                    })

                },

                handleSizeChange(size) {
                    this.pageSize = size
                    this.getEmpApi(this.currentPage, size)
                },

                handleCurrentChange(current) {
                    this.currentPage = current
                    this.getEmpApi(current, this.pageSize)
                },

                //表单验证
                submitForm() {
                    let flag = false;
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            flag = true;
                        } else {
                            flag = false;
                            return false;
                        }
                    });
                    return flag
                },

                resetForm() {
                    this.$refs.formRef.resetFields();
                    this.editDialogFormVisible = false
                },

                dialogClose() {
                    this.$refs.formRef.resetFields();
                }

            },


            beforeMount() {
                this.getEmpApi();
            },


        }
        // 需要声明使用插件
        const app = Vue.createApp(VueApp)
        // app.config.globalProperties
        app.use(ElementPlus).mount('#app')
    }

</script>

</html>